<template>
  <div class="container" ref="mainCon">
    <!-- <topTitle :titleText="projectName" :back="back" @gobackTriser="goBack" v-show="isOperate"></topTitle> -->
    <el-row class="titleBox" v-if="!isProjectDetail && showHistory">
      <div style="width: 100%">
        <span class="blockTitle">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          {{ projectName || '--' }}
        </span>
        <p>
          <span class="code"
            >开户银行：<span>{{ bankName || '--' }}</span></span
          >
          <span class="code"
            >银行网点：<span>{{ bankSiteName || '--' }}</span></span
          >
          <span class="code"
            >专户账号：
            <span>
              {{
                isDisplay
                  ? account.replace(
                      /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                      '$1**** ****$2'
                    )
                  : account
              }}
            </span>
          </span>
          <el-button
            type="primary"
            style="
              padding: 2px;
              width: 40px;
              background: #009588;
              border: 1px solid #009588;
            "
            @click="doDisplay"
            >{{ isDisplay ? '显示' : '隐藏' }}</el-button
          >
        </p>
      </div>
    </el-row>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="发薪年月" class="row-padding-bottom">
              <el-date-picker
                v-model="date"
                type="month"
                placeholder="选择年月"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="工资表状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.status"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in salaryStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="是否上传考勤表"
                class="row-padding-bottom lineFeedSty"
              >
                <el-select
                  v-model="filterField.isAttFileStr"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isFileStrArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="是否上传工人签字确认表"
                class="row-padding-bottom lineFeedSty"
              >
                <el-select
                  v-model="filterField.isEmployeeFileStr"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isFileStrArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="是否上传银行回执"
                class="row-padding-bottom lineFeedSty"
              >
                <el-select
                  v-model="filterField.isBankFileStr"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isFileStrArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="订单号">
                <el-input
                  v-model="filterField.sequenceCode"
                  placeholder="请输入订单号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_YH_ACCOUNT_SALARY_BATCH"
            ></exportBtn>
          </el-form-item>
          <!--          <div style="display:inline-block;margin-top:5px;">-->
          <!--            <el-link-->
          <!--              type="primary"-->
          <!--              @click="downLoad('salaryOperate')"-->
          <!--              v-if="isHefeng && exportBtn"-->
          <!--            >回传代发数据导入模板下载</el-link>-->
          <!--              <el-link v-else-if="isCz"-->
          <!--                       type="primary"-->
          <!--                       @click="downLoadCz()"-->
          <!--              >回传代发数据导入模板下载</el-link>-->
          <!--          </div>-->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="showHistory">
          <el-link
            type="primary"
            @click="goHistory"
            v-sdc
            class="fontBtn"
            style="margin-left: 10px"
            >历史记录</el-link
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="工资表信息" width="230px">
            <template slot-scope="scope">
              <p style="olor: rgb(96, 98, 102); font-weight: bold">
                {{ scope.row.year || '--' }}年{{
                  scope.row.month || '--'
                }}月第{{ scope.row.batchNo || '--' }}批次工资
              </p>
              <p style="color: #999; font-size: 12px" v-show="!isHsUser()">
                创建日期： {{ scope.row.createTime || '--' }}
              </p>
              <p style="color: #999; font-size: 12px">
                订单号：{{ scope.row.sequenceCode }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="应发/到账工资总额(元)"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <p>
                ￥{{ scope.row.shouldPay || '0' }}/￥{{
                  scope.row.bankActPay || '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="应发/到账总人数" align="center" width="160px">
            <template slot-scope="scope">
              <p>
                {{ scope.row.shouldPayTotal || '0' }}/{{
                  scope.row.bankActPayTotal || '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusDesc"
            label="工资表状态"
            align="center"
            :formatter="formatTd"
            width="180"
          >
            <template slot-scope="scope">
              <ul>
                <li>
                  {{ scope.row.statusDesc }}
                  <span
                    v-if="scope.row.sendTypeDesc"
                    class="generationMethod fontColorTheme fontBorderTheme"
                    >{{ scope.row.sendTypeDesc }}</span
                  >
                </li>
              </ul>
            </template>
          </el-table-column>
          <!-- <el-table-column label="是否上传附件" align="center" width="160px">
          <template slot-scope="scope">
            <p>{{scope.row.isFileStr || '--'}}</p>
          </template>
        </el-table-column> -->
          <el-table-column label="是否上传考勤表" align="center" width="180">
            <template slot-scope="scope">
              <p>{{ scope.row.isAttFileStr || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="是否上传工人签字确认表"
            align="center"
            width="210"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.isEmployeeFileStr || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="是否上传银行回执" align="center" width="180">
            <template slot-scope="scope">
              <p>{{ scope.row.isBankFileStr || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="app已确认人数" align="center" width="160px">
            <template slot-scope="scope">
              <p>
                {{
                  scope.row.confirmTotal === null
                    ? '--'
                    : scope.row.confirmTotal
                }}/{{ scope.row.shouldPayTotal || '--' }}
              </p>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="left" fixed="right" v-if="isOperate"> -->
          <el-table-column label="操作" align="left" fixed="right" width="260">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toDetail(scope.$index, scope.row, 'SH')"
                v-if="
                  scope.row.status == 'JC_AUDIT' &&
                  $store.state.userType == 'MONITOR'
                "
                >审核</el-link
              >
              <el-link
                type="primary"
                v-show="isShowDetail"
                @click="toDetail(scope.$index, scope.row)"
                >查看详情</el-link
              >
              <el-link
                type="primary"
                @click="toUploadFile(scope.$index, scope.row, 'SALARY_ATT')"
                >考勤表</el-link
              >
              <el-link
                type="primary"
                @click="toUploadFile(scope.$index, scope.row, 'SALARY_SIGN')"
                >工人签字确认表</el-link
              >
              <el-link
                type="primary"
                @click="toUploadFile(scope.$index, scope.row, 'SALARY_RECEIPT')"
                >银行回执</el-link
              >
              <el-link
                type="primary"
                @click="toOpenDialogReject(scope.$index, scope.row)"
                v-if="scope.row.status == 'REJECTED'"
                >驳回原因</el-link
              >

              <!--            <div class="manualPostbackBox" v-if="scope.row.status == 'NO_ISSUE' && isHefeng">-->
              <!--              &lt;!&ndash; v-if="scope.row.status == 'NO_ISSUE' && isHefeng" &ndash;&gt;-->
              <!--              <el-link type="primary">手动回传</el-link>-->
              <!--              <form class="upLoadDom">-->
              <!--                <input-->
              <!--                  id="waterImportfileChange"-->
              <!--                  type="file"-->
              <!--                  name="multipartFile"-->
              <!--                  @change="waterImportfileChange($event,scope.$index, scope.row)"-->
              <!--                  title="手动回传"-->
              <!--                />-->
              <!--              </form>-->
              <!--            </div>-->
              <!-- <el-link type="primary" @click="confirmPaySalary(scope.row)" v-if="scope.row.status == 'NO_ISSUE' && isHefeng">确认发放</el-link> -->
              <el-link
                type="primary"
                @click="confirmRelease(scope.$index, scope.row)"
                v-if="
                  scope.row.statusDesc == '待发放' &&
                  $store.state.userType == 'BANK' &&
                  isEsUser() &&
                  showHistory
                "
                >确认发放</el-link
              >

              <!--              <div class="manualPostbackBox" v-else-if="scope.row.status == 'NO_ISSUE' && isCz">-->
              <!--                  <el-link type="primary">手动回传</el-link>-->
              <!--                  <form class="upLoadDom">-->
              <!--                      <input-->
              <!--                          id="waterImportfileChangeCz"-->
              <!--                          type="file"-->
              <!--                          name="multipartFile"-->
              <!--                          @change="waterImportfileChangeCz($event,scope.$index, scope.row)"-->
              <!--                          title="手动回传"-->
              <!--                      />-->
              <!--                  </form>-->
              <!--              </div>-->
              <div
                class="manualPostbackBox"
                v-if="
                  scope.row.status == 'NO_ISSUE' &&
                  $store.state.userType == 'BANK' &&
                  bankSalaryImport &&
                  showHistory
                "
              >
                <div
                  v-if="
                    !scope.row.bankManualStatus ||
                    scope.row.bankManualStatus == 'NO_IMPORT'
                  "
                >
                  <el-link type="primary">手动回传</el-link>
                  <form class="upLoadDom">
                    <input
                      id="waterImportfileChangeCz"
                      type="file"
                      name="multipartFile"
                      @change="
                        waterImportfileChangeCz($event, scope.$index, scope.row)
                      "
                      title="手动回传"
                    />
                  </form>
                </div>
              </div>
              <el-link
                type="primary"
                v-if="
                  bankSalaryImport &&
                  (scope.row.bankManualStatus == 'NO_SYNC' ||
                    scope.row.bankManualStatus == 'SYNCHRONIZED') &&
                  showHistory
                "
                @click="toClearNetData(scope.row)"
                >清空实发数据</el-link
              >
              <el-link
                type="primary"
                v-if="
                  bankSalaryImport &&
                  scope.row.bankManualStatus == 'NO_SYNC' &&
                  showHistory
                "
                @click="toSyncData(scope.row)"
                >确认同步</el-link
              >
              <template v-if="isEsUser()">
                <el-link
                  type="primary"
                  @click="downloaDauthorization(scope.$index, scope.row)"
                  v-show="
                    scope.row.typeDesc == '已发放' ||
                    scope.row.typeDesc == '待发放'
                  "
                  >下载授权单</el-link
                >
              </template>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
      <!-- 上传合同附件 -->
      <el-dialog
        title="工资表附件"
        width="900px"
        :visible.sync="uploadContract"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <contractEnclosure :isShowType="true" :tableData="uploadImg" />
      </el-dialog>
    </div>
    <el-dialog
      title="上传失败"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <div class="errorNoticeBox">
        <i class="icon iconfont iconshibai1"></i>
      </div>
      <div v-html="errorNotice" class="errorBox"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="closeDialog" class="save"
          >确认</el-button
        >
        <el-button @click.native="closeDialog" class="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 驳回原因弹框 -->
    <dialogRejectReason
      v-if="dialogRejectshow"
      @closeDia="getCloseDia"
      :salaryId="salaryId"
      :projectId="projectId"
      :updaterId="updaterId"
    ></dialogRejectReason>
    <!-- 确认发放 -->
    <el-dialog
      title="确认发放"
      :visible.sync="centerDialogVisible"
      width="640px"
      :modal-append-to-body="false"
    >
      <div>
        <p style="color: red">
          【确认发放】之后默认实际到账工资等于应发工资，如存在实际到账工资与应发工资不—致。建议您采用【手动回传】方式
        </p>
        <p class="itemPay">请核对工资表的数据是否正确</p>
        <p class="itemPay">
          应发工资总额：<span style="color: red">￥{{ shouldPay }}</span>
        </p>
        <p class="itemPay">
          应发工资人数：<span style="color: red">{{ shouldPayTotal }}人</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="centerDialogVisible = false"
          style="padding: 10px 20px"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="commonBtn"
          style="width: 76px"
          @click="submitForm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="上传失败"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <div class="errorNoticeBox">
        <i class="icon iconfont iconshibai1"></i>
      </div>
      <div v-html="errorNotice" class="errorBox"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="closeDialog" class="save"
          >确认</el-button
        >
        <el-button @click.native="closeDialog" class="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 下载受理单 -->
    <div
      :style="{
        position: 'absolute',
        top: '1220px',
        display: centerVisible ? 'block' : 'none',
      }"
      id="authorizationSheet"
    >
      <table class="top-left">
        <tr>
          <td colspan="2" class="sheetTitle">工资发放授权单</td>
        </tr>
        <tr>
          <td colspan="2" class="clearfix">
            <div class="tr-left">
              <p>{{ offinePayDate.salaryInfo }}</p>
              <div v-if="isEsUser()" class="tr-left-tip">
                订单生成时间：{{ offinePayDate.createTime || '--' }}
              </div>
              <p>{{ offinePayDate.orderId }}</p>
            </div>
            <div class="tr-right">
              <div class="tr-right-top clearfix">
                <div class="tr-right-code fl">
                  <img class="srcCodeImg" :src="srcCode" alt />
                </div>
                <div class="tr-right-barCode fl">
                  <img class="barCodeCodeImg" :src="barCode" alt />
                </div>
              </div>
              <div class="tr-right-tip">
                提示：通过扫描二维码或条形码可快捷获取工资表订单
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="projectInformation">项目信息</td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目名称：{{ offinePayDate.projectName || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            建设方：{{ offinePayDate.pcName || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">施工方：{{ offinePayDate.pbName }}</td>
          <td class="tdLeft">
            施工方法人姓名：{{ offinePayDate.companyBoss || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目负责人姓名：{{ offinePayDate.projectAdmin || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目地址：{{ offinePayDate.address || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">专户账号：{{ offinePayDate.account || '--' }}</td>
          <td class="tdLeft">
            代发总人数：{{ offinePayDate.shouldCount || '--' }}人
          </td>
        </tr>
        <tr>
          <template v-if="isEsUser()">
            <td class="tdLeft">
              专户签约状态：<span
                :style="offinePayDate.signed === 0 ? 'color:red' : ''"
                >{{ offinePayDate.signed === 1 ? '已签约' : '未签约' }}</span
              >
            </td>
            <td class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
          <template v-else>
            <td colspan="2" class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import dialogRejectReason from '@/components/publicCom/dialogRejectReason'

export default {
  name: 'salaryPayBatchList',
  components: {
    dialogRejectReason,
  },
  props: {
    message: {
      type: String,
    },
    detailProjectName: {
      type: String,
    },
    isProjectDetail: {},
    showHistory: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      hiddleToolBar: false,
      tableHeight: null,
      titleText: '',
      back: true,
      isOperate: true, //项目看板的工资操作无
      projectId: '',
      projectName: '',
      date: [],
      salaryStatusOptions: [], //工资表状态
      //表格数据
      tableList: [],
      requestUrl: 'api-su/cs/salary/expand/list',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectId: '',
        year: '',
        month: '',
        status: '',
        sequenceCode: '',
        // isFileStr: '',
        isAttFileStr: '', //考勤
        isEmployeeFileStr: '', //工人签字
        isBankFileStr: '', //银行回执
      },
      isFileStrArr: [
        {
          id: '1',
          name: '是',
        },
        {
          id: '0',
          name: '否',
        },
      ],
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      loading: true,
      uploadImg: [],
      saveImgArr: [],
      srcList: [],
      oldSrcList: [],
      canLogin: false, //保存loading
      uploadContract: false, //上传合同附件
      salaryId: '', //工资id
      formVisible: false,
      flieUpload: {
        salaryId: '',
        projectId: '',
      },
      errorNotice: '',
      isShowDetail: '',
      exportBtn: '',
      bankName: '',
      bankSiteName: '',
      account: '',
      isDisplay: true, //是否隐藏
      isCz: false,
      loginType: '',
      advanced: false,
      updaterId: '',
      dialogRejectshow: false,
      shouldPay: '',
      shouldPayTotal: '',
      centerDialogVisible: false,
      bankSalaryImport: false,
      centerVisible: false,
      salaryIdTwo: '',
      id: '',
      offinePayDate: '',
    }
  },
  created() {
    //从项目看板中的工资
    if (this.message === 'salary') {
      this.isOperate = false
    }
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
      ? this.$route.query.projectName
      : this.detailProjectName
    this.filterField.projectId = this.$route.query.projectId
    if (this.isEsUser()) {
      this.filterField.sequenceCode = this.$route.query.sequenceCode
    }
    this.getSalaryStatus()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('bankSalaryPayList:detail') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListJSF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('TBankSalaryPayList:detail') >
        -1
    this.exportBtn =
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:export') > -1
    this.getBankSalaryDetail()
    //获取专户银行信息
    this.getBankInfo()
    if (this.isCzUser()) {
      this.isCz = true
    }
    this.loginType = localStorage.getItem('loginType')
  },
  computed: {
    isHefeng() {
      return this.$store.state.isHefeng
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    if (this.$route.query.projectId) {
      this.flieUpload.projectId = this.$route.query.projectId
    }

    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 290
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 328 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 300
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)

      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    goHistory() {
      const path = '/home/smallProjectManage/salaryAttachRecordPage'
      const oldUrl =
        this.$store.state.userType === 'MONITOR'
          ? '/home/project/projectList'
          : '/home/project/projectListQY'
      this.$router.push({
        path,
        query: {
          backPath: '/home/monitorProjectManagement/projectDetail',
          oldUrl,
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 下载授权单
     */
    async downloaDauthorization(index, row) {
      this.centerVisible = true
      this.salaryIdTwo = row.id
      this.updaterId = row.updaterId
      this.id = row.sequenceCode
      this.getBarimage()
      this.getQrimage()
      await this.getOffinePayDate()
      this.$nextTick(() => {
        this.toAuthorize()
      })
    },
    toAuthorize() {
      this.getPdf('authorizationSheet', '工资代发授权单')
      this.centerVisible = false
    },
    /**
     * @description: 线下代发页面数据
     */
    getOffinePayDate() {
      const vm = this
      return vm
        .axios({
          method: 'post',
          url: 'api-su/cs/salary/expand/ustxx',
          data: {
            id: vm.salaryIdTwo,
          },
        })
        .then((res) => {
          if (!res.data.hasError) {
            vm.offinePayDate = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 线下代发页面条形码
     */
    getBarimage() {
      const vm = this
      vm.barCode =
        common.commonApi + 'api-su/cs/salary/expand/barimage?info=' + vm.id
    },
    /**
     * @description: 线下代发页面二维码
     */
    getQrimage() {
      const vm = this
      vm.srcCode =
        common.commonApi + 'api-su/cs/salary/expand/qrimage?info=' + vm.id
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 232

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    doDisplay() {
      this.isDisplay = !this.isDisplay
    },
    toUploadFile(index, row, type) {
      this.salaryId = row.id
      this.uploadImg = []
      this.saveImgArr = []
      this.srcList = []
      this.oldSrcList = []
      this.getUploadSearchImg(this.salaryId, type)
      this.uploadContract = true
    },
    // 获取附件查询图片
    getUploadSearchImg(salaryId, type) {
      var data = {
        associatedName: 'T_CS_SALARY',
        associatedId: salaryId,
        fileType: type,
      }
      this.axios({
        method: 'post',
        url: '/api-su/cs/salary/expand/salaryFilelist',
        data: data,
      })
        .then((response) => {
          // this.bankData = response.data;
          if (!response.data.hasError) {
            this.uploadImg = response.data.result

            // for (var i = 0; i < this.uploadImg.length; i++) {
            //   this.saveImgArr.push({
            //     originalName: this.uploadImg[i].originalName,
            //     relativePath: this.uploadImg[i].relativePath,
            //     fileSize: this.uploadImg[i].fileSize,
            //     fileType: this.uploadImg[i].fileType
            //   });
            //   this.srcList.push(this.uploadImg[i].absolutePath);
            //   this.oldSrcList.push(this.uploadImg[i].absolutePath);
            // }
          } else {
            this.$message({
              type: 'error',
              message: '数据获取失败',
            })
          }
        })
        .catch((error) => {})
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
    goBack() {
      let path, oldUrl
      //   if(this.$route.query.delSalary &&　this.$route.query.delSalary == "delSalaryList") {
      //     path = "/home/delSalary/salaryList",
      //     oldUrl = "/home/delSalary/salaryList"
      //   }else {
      //     path = "/home/salaryDf/salaryPayList",
      //     oldUrl = "/home/salaryDf/salaryPayBatchList"
      //   }
      if (
        this.$route.query.delSalary &&
        this.$route.query.delSalary == 'delSalaryList'
      ) {
        ;(path = '/home/delSalary/salaryList'),
          (oldUrl = '/home/delSalary/salaryList')
      } else if (this.loginType === 'QY' || this.loginType === 'XM') {
        ;(path = '/home/salaryDf/companySalaryBatchList'),
          (oldUrl = '/home/salaryDf/companySalaryBatchList')
      } else {
        oldUrl =
          this.$route.query.taskType == 'salary'
            ? '/home/salaryDf/salaryPayListTabTwo'
            : '/home/salaryDf/salaryPayListTab'
        path =
          this.$route.query.taskType == 'salary'
            ? '/home/salaryDf/salaryPayListTabTwo'
            : '/home/salaryDf/salaryPayListTab'
      }
      this.$router.push({
        path: path,
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getSalaryStatus() {
      //获取工资表状态
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/status',
        data: {},
      })
        .then((res) => {
          this.salaryStatusOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取工资表状态数据失败',
            type: 'error',
          })
        })
    },
    // 搜索
    searchList() {
      this.pageSize = 20
      this.pageNo = 1
      if (this.date && this.date.length > 0) {
        let tempDate = this.date.split('-')
        this.filterField.year = tempDate[0]
        this.filterField.month = tempDate[1]
      } else {
        this.filterField.year = ''
        this.filterField.month = ''
      }
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(index, row, isSH) {
      var queryData = {
        projectName: this.projectName,
        projectId: this.projectId,
        salaryId: row.id,
        yearQuery: row.year,
        monthQuery: row.month,
        batchNo: row.batchNo,
        statusQuery: row.status,
        from: this.message,
        sequenceCode: row.sequenceCode,
        isSH: isSH,
        taskType: this.$route.query.taskType,
      }

      //   if(this.$route.query.delSalary &&　this.$route.query.delSalary == "delSalaryList") {
      //     queryData.delSalary = "delSalaryList";
      //     this.$router.push({
      //       path: "/home/salaryDf/salaryPayBatchDetailList",
      //       name: "salaryPayBatchDetailList",
      //       query: queryData
      //     });
      //     this.$store.commit("CHANGE_SLIDER_NAME", {
      //       oldUrl: "/home/delSalary/salaryList",
      //       newUrl: this.$router.currentRoute.fullPath
      //     });
      //   }else {
      //     this.$router.push({
      //       path: "/home/salaryDf/salaryPayBatchDetailList",
      //       name: "salaryPayBatchDetailList",
      //       query: queryData
      //     });
      //     this.$store.commit("CHANGE_SLIDER_NAME", {
      //       oldUrl: "/home/salaryDf/salaryPayList",
      //       newUrl: this.$router.currentRoute.fullPath
      //     });
      //   }
      if (
        this.$route.query.delSalary &&
        this.$route.query.delSalary == 'delSalaryList'
      ) {
        queryData.delSalary = 'delSalaryList'
        this.$router.push({
          path: '/home/salaryDf/salaryPayBatchDetailList',
          name: 'salaryPayBatchDetailList',
          query: queryData,
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/delSalary/salaryListTab',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.loginType === 'QY' || this.loginType === 'XM') {
        this.$router.push({
          path: '/home/salaryDf/salaryPayBatchDetailList',
          name: 'salaryPayBatchDetailList',
          query: queryData,
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/salaryDf/companySalaryBatchList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/salaryDf/salaryPayBatchDetailList',
          name: 'salaryPayBatchDetailList',
          query: queryData,
        })
        var oldUrl =
          this.$route.query.taskType == 'salary'
            ? '/home/salaryDf/salaryPayListTabTwo'
            : '/home/salaryDf/salaryPayListTab'
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: oldUrl,
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 回传代发数据导入模板下载
    downLoad() {
      window.location.href =
        common.commonApi +
        'api-su/cs/salary/expand/customDownSalary?access_token=' +
        localStorage.getItem('access_token')
    },
    downLoadCz() {
      window.location.href =
        common.commonApi +
        'api-su/cs/salary/expand/bankSalaryTemplateDown?access_token=' +
        localStorage.getItem('access_token')
    },
    // 手动回传 ------start
    waterImportfileChange(e, index, row) {
      var that = this
      var url = window.location.href
      var Filedata = e.target.value
      that.flieUpload.salaryId = row.id
      that.flieUpload.projectId = row.projectId
      if (!/\.(xls|xlsx)$/.test(Filedata)) {
        this.$message({
          message: 'excel类型必须是.xls,xlsx中的一种',
          type: 'warning',
        })
        document.getElementById('waterImportfileChange').value = ''
        return
      }

      setTimeout(function () {
        that.uploadFileByAjaxSubmit(
          'api-su/cs/salary/expand/customImportSalary',
          that.success,
          that.error,
          e,
          row
        )
      }, 500)
    },
    uploadFileByAjaxSubmit(url, successCallBack, errorCallBack, e, row) {
      const vm = this
      var token = localStorage.getItem('access_token')
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        data: vm.flieUpload,
        headers: { Authorization: 'Bearer ' + token },
        success: function (data) {
          e.target.value = ''
          successCallBack(data, row)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          e.target.value = ''
          errorCallBack(XMLHttpRequest, textStatus, errorThrown)
        },
      }

      //三种方式均可
      // $("#waterImportBox").ajaxSubmit(options);
      $(e.target.form).ajaxSubmit(options)
      return false
    },
    success(data, row) {
      if (!data.hasError) {
        this.$message({
          message: '导入成功',
          type: 'success',
        })
        this.$router.push({
          path: '/home/salaryDf/salaryPayBatchDetailList',
          name: 'salaryPayBatchDetailList',
          query: {
            projectId: this.projectId,
            projectName: this.projectName,
            salaryId: row.id,
            yearQuery: row.year,
            statusQuery: row.status,
            from: this.message,
            batchNoInfo:
              row.year + '年' + row.month + '月第' + row.batchNo + '批次工资',
            monthQuery: row.month,
            batchNo: row.batchNo,
          },
        })
        if (
          this.$route.query.delSalary &&
          this.$route.query.delSalary == 'delSalaryList'
        ) {
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/delSalary/salaryList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/salaryDf/salaryPayList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      } else {
        this.errorNotice = data.errorMsg
        this.formVisible = true
      }
    },
    //根据状态码判断是否是401
    error(XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status === '401' || XMLHttpRequest.status === '403') {
        localStorage.setItem('access_token', '')
        localStorage.setItem('refresh_token', '')
        localStorage.setItem('userName', '')
        // 只有在当前路由不是登录页面才跳转
        if (router.currentRoute.path !== '/login/loginFirst') {
          router.replace({
            path: '/login/loginFirst',
          })
        }
        //清除tab栏数据
        this.$store.state.sliderBar = []
        localStorage.removeItem('sliderBar')
      } else {
        this.$message({
          message: '数据请求失败',
          type: 'warning',
        })
      }
    },
    closeDialog() {
      this.formVisible = false
    },
    // 手动回传 ------end

    // 滁州手动回传 ------start
    waterImportfileChangeCz(e, index, row) {
      var that = this
      var url = window.location.href
      var Filedata = e.target.value
      that.flieUpload.salaryId = row.id
      that.flieUpload.projectId = row.projectId
      if (!/\.(xls|xlsx)$/.test(Filedata)) {
        this.$message({
          message: 'excel类型必须是.xls,xlsx中的一种',
          type: 'warning',
        })
        document.getElementById('waterImportfileChangeCz').value = ''
        return
      }

      setTimeout(function () {
        that.uploadFileByAjaxSubmitCz(
          'api-su/bank/manual/salaryImport',
          that.successCz,
          that.errorCz,
          e,
          row
        )
      }, 500)
    },
    uploadFileByAjaxSubmitCz(url, successCallBack, errorCallBack, e, row) {
      const vm = this
      var token = localStorage.getItem('access_token')
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        data: vm.flieUpload,
        headers: { Authorization: 'Bearer ' + token },
        success: function (data) {
          e.target.value = ''
          successCallBack(data, row)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          e.target.value = ''
          errorCallBack(XMLHttpRequest, textStatus, errorThrown)
        },
      }

      //三种方式均可
      // $("#waterImportBox").ajaxSubmit(options);
      $(e.target.form).ajaxSubmit(options)
      return false
    },
    successCz(data, row) {
      if (!data.hasError) {
        this.$message({
          message: data.msg,
          type: 'success',
        })
        this.$refs.pagination.getTableListData()
      } else {
        this.errorNotice = this.handleMsgLen(data.errorMsg, 200)
        this.formVisible = true
      }
    },
    handleMsgLen(msg, len) {
      var new_msgName = ''
      if (msg.length > len) {
        new_msgName = msg.substring(0, len)
        new_msgName += '...'
      } else {
        new_msgName = msg
      }
      return new_msgName
    },
    //根据状态码判断是否是401
    errorCz(XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status === '401' || XMLHttpRequest.status === '403') {
        localStorage.setItem('access_token', '')
        localStorage.setItem('refresh_token', '')
        localStorage.setItem('userName', '')
        // 只有在当前路由不是登录页面才跳转
        if (router.currentRoute.path !== '/login/loginFirst') {
          router.replace({
            path: '/login/loginFirst',
          })
        }
        //清除tab栏数据
        this.$store.state.sliderBar = []
        localStorage.removeItem('sliderBar')
      } else {
        this.$message({
          message: '数据请求失败',
          type: 'warning',
        })
      }
    },
    // 手动回传 ------end
    getBankInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.bankName = data.bankName
            this.bankSiteName = data.bankSiteName ? data.bankSiteName : ''
            this.account = data.account || ''
          }
        })
        .catch((error) => {})
    },
    //确认发放
    confirmPaySalary(row) {
      var msg =
        this.projectName +
        row.year +
        '年' +
        row.month +
        '月第' +
        row.batchNo +
        '批次工资应发' +
        row.shouldPayTotal +
        '人，应发' +
        row.shouldPay +
        '元，请确认该份工资表是否已全员全额发放。' +
        '确认后工资表状态将变更为已发放，请谨慎操作。'
      this.$confirm(msg, '是否确认已发放该份工资表', {
        cancelButtonClass: 'btn-custom-cancel',
      })
        .then(() => {
          this.toConfirmPaySalary(row.id)
        })
        .catch(() => {})
    },
    toConfirmPaySalary(salaryId) {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/confirmPaySalary',
        data: {
          salaryId: salaryId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$refs.pagination.getTableListData()
            this.$message({
              message: '发放成功',
              type: 'success',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '数据请求失败',
            type: 'error',
          })
        })
    },
    toOpenDialogReject(index, row) {
      this.salaryId = row.id
      this.updaterId = row.updaterId
      this.projectId = row.projectId
      this.dialogRejectshow = true
    },
    //关闭弹框
    getCloseDia() {
      this.dialogRejectshow = false
    },
    /**
     * @description: 银行端确认发放
     */
    confirmRelease(index, row) {
      console.log('123')
      this.salaryId = row.id
      this.shouldPay = row.shouldPay
      this.shouldPayTotal = row.shouldPayTotal
      this.centerDialogVisible = true
    },
    /**
     * @description: 银行端确认发放
     */
    submitForm() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/confirmPaySalary',
        data: {
          salaryId: this.salaryId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '确认发放成功',
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '确认发放失败',
            type: 'error',
          })
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
    },
    //工资流水
    getBankSalaryDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/findbyname',
        data: {
          name: 'bankSalaryDetail',
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.value == '1') {
              this.bankSalaryImport = true
            } else {
              this.bankSalaryImport = false
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '数据请求失败，请重试',
            type: 'error',
          })
        })
    },
    // 清空实发数据
    toClearNetData(row) {
      this.$confirm('确认清除实发数据?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.clearNetData(row)
        })
        .catch(() => {})
    },
    clearNetData(row) {
      this.axios({
        method: 'post',
        url: 'api-su/bank/manual/czbsclean',
        data: {
          salaryId: row.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: response.data.msg,
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
    // 确认同步
    toSyncData(row) {
      this.$confirm('确认同步?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.syncData(row)
        })
        .catch(() => {})
    },
    syncData(row) {
      this.axios({
        method: 'post',
        url: 'api-su/bank/manual/czbanksync',
        data: {
          salaryId: row.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: response.data.msg,
              type: 'success',
            })
            this.$router.push({
              path: '/home/salaryDf/salaryPayBatchDetailList',
              name: 'salaryPayBatchDetailList',
              query: {
                projectId: row.projectId,
                projectName: row.projectName,
                salaryId: row.id,
                yearQuery: row.year,
                statusQuery: row.status,
                from: this.message,
                batchNoInfo:
                  row.year +
                  '年' +
                  row.month +
                  '月第' +
                  row.batchNo +
                  '批次工资',
                mark: 'payrollList',
                monthQuery: row.month,
                batchNo: row.batchNo,
              },
            })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/salaryDf/salaryPayListTab',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style lang="less" scoped>
.titleBox {
  // background: #e4ebf1;
  padding: 16px 24px;
  border-bottom: 0;
  margin-bottom: 0;
  position: relative;
  &::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
  .blockTitle {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    // line-height: 40px;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  // .qyInfo {
  //     width:66px;
  //     height:66px;
  //     margin-right:12px;
  //     img {
  //         width:100%;
  //         height:100%;
  //     }
  // }
  .code {
    font-size: 14px;
    color: #666;
    margin-left: 30px;
  }
  .goSeeDetail {
    font-size: 14px;
    margin-left: 30px;
  }
  p {
    margin-top: 10px;
    position: relative;
  }
}
// .mainContent {
//   overflow-y: auto;
//   background: #fff;
//   padding: 24px;
// }
.uploadBox {
  text-align: center;
  padding: 20px;
}
.imgStyle {
  margin-top: 20px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}

.manualPostbackBox {
  position: relative;
  display: inline-block;
  .upLoadDom {
    position: absolute;
    width: 96px;
    height: 25px;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 0px;
    form {
      input {
        width: 96px;
        height: 25px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}
.errorNoticeBox {
  text-align: center;
  margin-bottom: 24px;
  i {
    color: red;
    font-size: 50px;
  }
}
.errorBox {
  line-height: 24px;
}
@import '../../../static/css/filterArea.less';
.itemPay {
  margin-top: 10px;
}
.generationMethod {
  display: inline-block;
  width: 60px;
  line-height: 20px;
  border: 1px solid #009588;
  font-size: 12px;
  color: #009588;
}
.lineFeedSty {
  /deep/.el-form-item__label {
    line-height: normal !important;
  }
}
.downshoulidan {
  /deep/ .el-dialog__header {
    padding: 0 !important;
    border-bottom: 0px;
  }
}
#authorizationSheet {
  width: 720px;
  height: 413px;
  text-align: center;
  margin: auto;

  .sheetTitle {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    color: #1f803b;
    background-color: #eaf6ec;
  }

  .top-left {
    width: 720px;
    height: 413px;
    border: 1px solid #1f803b;
    border-collapse: collapse;
    td {
      border: 1px solid #1f803b;
    }
  }
}
.tr-left {
  float: left;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  color: #218b3d;
  margin-left: 10px;
  position: relative;
  p:first-child {
    padding: 10px.0;
  }
  p:last-child {
    width: 340px;
    height: 51px;
    line-height: 51px;
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #1f803b;
    background: #eaf6ec;
  }
  .tr-left-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #1f803b;
    line-height: 14px;
    position: absolute;
    bottom: -20px;
    left: 10px;
  }
}
.tr-right {
  float: left;
  margin-left: 70px;
  &-top {
    width: 291px;
    // height: 66.4px;
    // margin-top: 10px;
  }
  &-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    color: #333333;
    // margin-top: 10px;
    line-height: 14px;
  }
  &-code {
    width: 100px;
    height: 100px;
  }
  &-barCode {
    width: 160px;
    height: 58px;
    margin-top: 20px;

    margin-left: 17.7px;
  }
}
.projectInformation {
  background: #eaf6ec;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  color: #1f803b;
}
.tdLeft {
  padding-left: 20px;
  text-align: left;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #1f803b;
}
.srcCodeImg {
  width: 100%;
  height: 100%;
}
.barCodeCodeImg {
  width: 100%;
  height: 100%;
}
</style>
